<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>Home</title>
</head>

<body>
    <h1 style="text-align: center;color:#1e9fff;margin-top: 20px;margin-bottom: 20px">图书列表</h1>

    <!-- 搜索-->
    <form class="layui-form layui-row layui-col-space5">
        <div class="layui-col-md2">
            <div class="layui-input-wrap" style="margin-left: 10px">
                <input type="text" name="bookName" placeholder="请输入图书名称" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <div id="cId" class="xm-select-demo"></div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <select name="status">
                    <option value="">请选择上下架状态</option>
                    <option value="0">下架</option>
                    <option value="1">上架</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-input-wrap">
                <input type="text" class="layui-input" id="ID-laydate-range-datetime" name="time" placeholder=" 请选择时间范围 ">
            </div>
        </div>
        <div class="layui-btn-container layui-col-md2">
            <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
            <button type="reset" id="reset" class="layui-btn layui-btn-primary">清空</button>
        </div>
    </form>

    <!-- lay-filter="test" ： 是进行表格定位的   id="test" ： 是用于渲染表格的 -->
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script src="./layui/layui.js"></script>
    <script src="js/xm-select.js"></script>
    <script>

        layui.use(function () {

            //获取table组件的对象
            var table = layui.table;
            //layui自己也有ajax，下面的写法是直接获取jquery的核心对象。
            var $ = layui.$;
            var layer = layui.layer;//confirm函数需要一个layui的layer对象。
            var laydate = layui.laydate;
            var form = layui.form;

            //搜索功能 - 点击搜索按钮搜索
            form.on('submit(search)', function(data){
                var field = data.field; // 获得表单字段
                // console.log('搜索功能field值：',field);

                //截取时间
                var time =field.time;
                if(time && time.length>0){
                    var times = time.split("-");
                    // console.log(times);
                    if(times && times.length==2){
                        field.start = times[0].trim();
                        field.end = times[1].trim();
                    }

                }

                // 执行搜索重载
                table.reload('test', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });

            //获取分类列表
            $.getJSON("http://localhost:8080/getCategoryList",function (d){
                // console.log(d);
                if(d.code ==0){
                    //xm-select 下拉框
                    var cIdDemo = xmSelect.render({
                        el: '#cId',
                        filterable: true,
                        prop: {
                            name: 'categoryName',
                            value: 'categoryId',
                        },
                        theme: {
                            color: '#0081ff',
                        },
                        radio:true,
                        data: d.data,
                        name: 'categoryId'
                    });

                    //绑定清空事件
                    $("#reset").click(function (){
                        cIdDemo.setValue([ ]);
                    });
                }else{
                    layer.msg(d.msg);
                }
            });

            // 日期时间范围
            laydate.render({
                elem: '#ID-laydate-range-datetime',
                type: 'datetime',
                format:'yyyy/MM/dd HH:mm:ss',
                range: true
            });

            //头部工具栏事件：
            table.on('toolbar(test)', function (obj) {
                // console.log("顶部工具栏事件被触发成功", obj);

                var event = obj.event;

                if (event == "addBook") {
                    //添加图书
                    layer.open({
                        type: 2,//1 dom或文本，2 iframe,3 加载层,4 tips
                        skin: 'layui-layer-lan',
                        title: '添加图书',
                        area: ['500px', '600px'],
                        shade: [0.3, '#2F4056'],
                        closeBtn: 1,
                        content: 'book-add.html',
                        // 弹层被关闭且销毁后的回调函数。
                        end: function () {
                            //刷新表格
                            table.reload("test");
                        }
                    });

                }
                else if (event == "batchDelete") {
                    //批量删除  -  具体实现：拿到一组前端的bookId，然后转成一个集合，给后端，因为后端的参数是一个集合。
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    // console.log("checkStatus.data:", checkStatus.data);

                    //选中图书列表
                    var list = checkStatus.data;

                    if (list && list.length == 0) {
                        layer.msg("未选中要删除的数据");
                    } else {
                        layer.confirm('确认是否删除', { btn: ['确定', '取消'] }, function (index) {
                            //构建参数
                            var arr = [];

                            for (var i = 0; i < list.length; i++) {
                                arr.push(list[i].bookId);
                            }

                            //AJAX
                            $.ajax({
                                type: "delete",
                                url: "http://localhost:8080/batchDeleteBook",
                                data: JSON.stringify(arr),
                                contentType: 'application/json',
                                dataType: 'json',
                                success: function (d) {
                                    // console.log("d-------", d);
                                    if (d.code == 0) {
                                        //删除成功
                                        table.reload("test");
                                    } else {
                                        layer.msg(d.msg);
                                    }
                                }
                            });

                            //关闭弹出层
                            layer.close(index)
                        })
                    }



                }
            });

            //单元格事件处理  -  on函数可以处理各种各样的事件：单元格事件、顶部工具栏事件等等
            table.on('tool(test)', function (obj) {//（'定位','回调函数'）
                // console.log("tool(test)-------------", obj);
                // console.log("tool(test)======================", obj.event);

                var event = obj.event;
                if (event == 'del') {// '' ,按钮,function
                    layer.confirm('确认要删除嘛？', { btn: ['确定', '取消'] }, function (index) {//index是入参，就是你这个层

                        //点击确定
                        //删除
                        // console.log("删除---bookid", obj.data.bookId);
                        var bookId = obj.data.bookId;

                        //AJAX调用  - 格式--- ("请求地址",{请求参数--后端参数:前端参数},回调函数)
                        $.getJSON("http://localhost:8080/deleteBook", { bookId: bookId }, function (d) {
                            if (d.code === 0) {
                                //删除成功 - 刷新表格数据
                                table.reload("test");
                            } else {
                                layer.msg(d.msg);
                            }
                        });
                        //关闭提示框：
                        layer.close(index);
                    });
                } else if (event == 'edit') {
                    //更新图书
                    layer.open({
                        type: 2,//1 dom或文本，2 iframe,3 加载层,4 tips
                        skin: 'layui-layer-lan',
                        title: '更新图书',
                        area: ['500px', '700px'],
                        shade: [0.3, '#2F4056'],
                        closeBtn: 1,
                        content: 'book-edit.html?status='+obj.data.status+'&categoryId='+obj.data.categoryId,
                        // 弹层被关闭且销毁后的回调函数。
                        end: function () {
                            //刷新表格
                            table.reload("test");
                        },
                        success: function (layero, index, that) {
                            // 获取 iframe 中 body 元素的 jQuery 对象
                            var body = layer.getChildFrame('body', index);
                            // 给 iframe 页中的某个输入框赋值
                            body.find('#bookId').val(obj.data.bookId);
                            body.find('#bookName').val(obj.data.bookName);
                            body.find('#authorName').val(obj.data.authorName);
                            body.find('#price').val(obj.data.price);
                            body.find('#createTime').val(obj.data.createTime);
                            body.find('#picId')[0].src = "http://127.0.0.1:8080" + obj.data.bookUrl;
                            body.find('#bookAddress').val(obj.data.bookAddress);
                            body.find('#bookUrl').val(obj.data.bookUrl);
                        }
                    });

                }


            });

            //调用对象中的函数进行表格生成
            table.render({
                // id选择器
                elem: "#test",
                // 数据来源的位置
                url: 'http://localhost:8080/getBooksPage',
                page: {
                    limit: 5,
                    limits: [5, 10, 15, 20],
                    prev: "上一页",
                    next: "下一页",
                    groups: 3,
                    theme: "#1e9fff"
                },
                request: {
                    pageName: 'pageNo', // 页码的参数名称，默认：page
                    limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
                },
                //如果前后端的数据结构不一样，就用parseData转一下
                parseData: function (res) {//即为原始返回的数据 ----  可以用于调试
                    // console.log(res);
                    return {
                        "code": res.code, // 解析接口状态
                        "msg": res.msg, // 解析提示文本
                        "count": res.data.total, // 解析数据长度
                        "data": res.data.page // 解析数据列表
                    }
                },
                //多行代码 ： ``   ,单行代码： ''
                // toolbar:true,//定制化的时候，templet定制化的东西，没有办法让它消失。
                toolbar: `
                    <div>
                        <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-bg-red">批量删除</button>
                        <button type="button" lay-event="addBook" class="layui-btn layui-btn-sm layui-btn-normal">添加</button>
                    </div>
                `,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },//多选框
                    {
                        title: "图书编号",
                        field: 'bookId'
                    },
                    {
                        title: "图书名称",
                        field: 'bookName'
                    },
                    {
                        title: "图书封面",
                        templet: function (d) {
                            // console.log("当前行数据", d);
                            return '<Image src="http://127.0.0.1:8080' + d.bookUrl + '"></Image>';
                        }
                    },
                    {
                        title: "图书作者",
                        field: 'authorName'
                    },
                    {
                        title: "图书分类",
                        // field:'categoryId'
                        // field:'category.categoryName'
                        templet: function (d) {
                            // console.log("当前行数据", d);
                            return d.category.categoryName;
                        }
                    },
                    {
                        title: "图书价格",
                        field: 'price',
                        sort: true//根据图书价格排序
                    },
                    {
                        title: "是否上架",
                        // field:'status'
                        //根据status的状态 填写 上架 还是 下架
                        templet: function (d) {
                            // console.log("当前行数据", d.status);
                            return d.status == 0 ? '<span class="layui-badge">下架</span>' : '<span class="layui-badge layui-bg-blue">上架</span>'
                        }
                    },
                    {
                        title: "上传时间",
                        field: 'createTime'
                    },
                    {
                        title: "操作",
                        templet: function (d) {
                            // console.log("当前行数据", d);
                            var s = '<button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">更新</button>';
                            s += '<button type="button" lay-event="del" class="layui-btn layui-btn-xs layui-bg-red">删除</button>';
                            return s;
                        }
                    }
                ]]
            });
        });
    </script>
</body>

</html>